<template>
  <div class="phone">
    <div class="form">
      <div class="form_item">
        <span class="item_title">手机号：</span>
        <Input size="large" v-model="formItem.phone" placeholder="请输入手机号" style="width: 300px"></Input>
      </div>
      <div class="form_item" v-if="!codeSuccess" style="position: relative">
        <span class="item_title">验证码：</span>
        <div class="process_btn btn auth_code" @click="getCode">
          <span class="auth_code iconfont" :class="isRe?'icon-jiazai':'icon-dunpaibaoxianrenzheng'"></span>
          <span class="auth_code code_text">点击完成验证</span>
        </div>
        <div class="modal" :style="{display: modalDisplay}">
          <div class="modal_box">
            <div class="modal_bg"><img v-if="modalCode.bgImg" :src="modalCode.bgImg?modalCode.bgImg:''" alt=""></div>
            <ul>
              <li
                v-for="(item,index) in modalCode.codeTexts"
                :key="index"
                :style="'fontSize:'+ item.fontSize +'em;top:'+ item.top +'%;left:'+ item.left +'%'"
                @click="checkAuthCode(index)"
              >
                {{item.text}}
              </li>
            </ul>
          </div>
          <p>点击选择字体较大的文字</p>
        </div>
      </div>
      <div class="form_item" v-if="codeSuccess">
        <span class="item_title"></span>
        <div class="success_btn btn">
          <span class="iconfont icon-icon-chenggong2"></span>
          <span class="code_text">验证成功</span>
        </div>
      </div>
      <div class="form_item" v-if="codeSuccess">
        <span class="item_title">验证码：</span>
        <Input size="large" v-model="formItem.phone" placeholder="请输入验证码" style="width: 300px">
          <span slot="append">获取验证码</span>
        </Input>
      </div>
      <div class="next_box">
        <Button type="primary" :disabled="!isGetCode">下一步</Button>
      </div>
    </div>
  </div>
</template>

<script>
  import auth_code from '../../../apiData/auth_code.js'
  export default {
    name: "phone",
    data() {
      return {
        isRe: false,
        modalDisplay: 'none',  // 验证框是否存在 为''
        codeSuccess: false,  // 验证成功 为true
        modalCode:{
          bgImg: '',
          codeTexts: [],
          successTextIndex: null,
        },
        formItem: {
          phone: ''
        },
        isGetCode: false
      }
    },
    created() {
      this.setCode();
      window.addEventListener("mousedown", (e) => {
        let codeName = 'auth_code';
        let className = e.target._prevClass;
        if(className) {
          let index = className.indexOf(codeName);
          if(index===-1 && this.modalDisplay!=='none') {
            this.modalDisplay = 'none';
            this.isRe = false;
          }
        }
      });
    },
    methods: {
      //  验证
      getCode() {
        if(!this.isRe) {
          this.isRe = !this.isRe;
          let timer = setTimeout(() => {
            this.modalDisplay = '';
            clearTimeout(timer);
          }, 2000)
        }
      },
      setCode() {
        this.modalCode.bgImg = auth_code.code_bg_img[Math.round(Math.random()*auth_code.code_bg_img.length)];
        let codeTexts = [];
        let text_count = 6;
        let arr = [...auth_code.code_texts];
        for (let i=0; i<text_count; i++) {
          let index = Math.round(Math.random()*arr.length);
          let text = arr[index];
          let top = Math.round(Math.random()*100);
          let left = Math.round(Math.random()*100);
          let obj = {
            text: text,
            fontSize: 1,
            top: top,
            left: left
          };
          codeTexts.push(obj);
        }
        let textIndex = Math.floor(Math.random() * 6);
        this.modalCode.successTextIndex = textIndex;
        codeTexts[textIndex].fontSize = 2;
        this.modalCode.codeTexts = codeTexts;
        console.log(this.modalCode);
      },
      checkAuthCode(index) {
        this.isRe = false;
        this.modalDisplay = 'none';
        if(this.modalCode.successTextIndex===index) {
          this.$Message.success('验证成功!');
          this.codeSuccess = true;
        }else{
          this.$Message.error('验证失败!');
          this.codeSuccess = false;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .phone {
    .form{
      width: 400px;
      margin: auto;
      .form_item{
        height: 40px;
        display: flex;
        align-items: center;
        margin: 8px 0;
        /*border: 1px solid #0f0;*/
        span.item_title{
          display: inline-block;
          width: 80px;
          text-align: right;
          /*padding-right: 10px;*/
        }
        .btn{
          width: 300px;
          height: 36px;
          border: 1px solid #e4e7eb;
          background: #f5f5f5;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .iconfont{
            font-size: 20px;
            background: #fff;
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            margin-right: 4px;
            box-shadow: 0 2px 8px 1px rgba(225,225,225,0.6);
            transition: all 0.5s;
          }
          .fall{
            -webkit-animation-name:spin;
            animation-name:spin;
          }
          @-webkit-keyframes spin {
            0% {
              transform: rotateZ(0deg);
            }
            25% {
              transform: rotateZ(90deg);
            }
            50% {
              transform: rotateZ(180deg);
            }
            75% {
              transform: rotateZ(270deg);
            }
            100% {
              transform: rotateZ(360deg);
            }
          }
          @keyframes spin {
            0% {
              transform: rotateZ(0deg);
            }
            25% {
              transform: rotateZ(90deg);
            }
            50% {
              transform: rotateZ(180deg);
            }
            75% {
              transform: rotateZ(270deg);
            }
            100% {
              transform: rotateZ(360deg);
            }
          }
          .icon-jiazai{
            -webkit-animation: spin 0.5s ease 0s 4 both;
          }
        }
        .process_btn:hover{
          span.iconfont{
            background: #2d8cf0;
            color: #fff;
          }
          span.code_text{
            color: #2d8cf0;
          }
        }
        .success_btn{
          border: 1px solid rgb(82, 204, 186);
          background: rgba(82, 204, 186, 0.3);
          span{
            color: rgb(82, 204, 186);
          }
          .iconfont{
            background: transparent;
          }
        }
        .modal{
          position: absolute;
          bottom: 4px;
          left: 80px;
          width: 300px;
          height: 180px;
          background: #fff;
          border: 1px solid #ebebeb;
          border-radius: 3px;
          padding: 8px;
          .modal_box{
            width: 100%;
            height: calc(100% - 20px);
            position: relative;
            border-radius: 3px;
            .modal_bg{
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: 1;
              img{
                width: 100%;
                height: 100%;
              }
            }
            ul{
              position: absolute;
              width: 80%;
              height: 80%;
              top: 10%;
              left: 10%;
              z-index: 5;
              li{
                display: inline-block;
                position: absolute;
                transform: translate(-50%, -50%);
                color: #f0f0f0;
                cursor: pointer;
              }
            }
          }
        }
      }
      .next_box{
        margin-top: 40px;
        text-align: center;
      }
    }
  }
</style>
<style scoped lang="scss">
  /deep/ .ivu-input-wrapper{
    .ivu-input-inner-container{
      input{
        /*border-right: none;*/
      }
    }
    .ivu-input-group-append{
      background: transparent;
      border-left: none;
      cursor: pointer;
    }
  }
</style>
